<template>
  <div class="singerDetail">
    <back-nav title="歌单详情"></back-nav>
    <song-sheet3 :list-data="listData"></song-sheet3>
  </div>
</template>
<script>
import SongSheet3 from "../components/SongSheet3";
  import BackNav from "../components/BackNav";
  export default {
    name: "SingerDetail",
    components: {
      SongSheet3,
      BackNav
    },
    data(){
      /** listData:{
       *    id
       *    name  //标题
       *    playCount
       *    coverImgUrl
       *    tracks: []  //歌曲列表
       *    tracks[0].id  //歌的id
       *    tracks[0].name  //歌名
       *    tracks[0].al.picUrl //歌曲所属专辑封面
       *    tracks[0].ar[0].name  //第一个歌手名字
       *  }
       * */
      return {
        listData: {}
      };
    },
    methods: {
      getData(id){
        this.listData = {};
        this.$axios.get(`/api/artist/top/song?id=${id}`)
          .then(res => {
            this.listData = {
              name: this.$route.params.name,
              coverImgUrl: this.$route.params.avatar,
              tracks: res.data.songs
            }
            /**
             * 这个不行：
             * this.listData.name = this.$route.params.name;
             * this.listData.coverImgUrl = this.$route.params.avatar;
             * this.listData.tracks = res.data.songs;
             * 因为watch监听的是listData，而必须改变listData的引用地址或者值
             * 而这里的是改变listData里面的某个key的值或者引用地址
             * 疑问：子组件的watch里加了属性(deep: ture)就是深度监听对象里的东西的呀
             *  */ 
            console.log(this.listData);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    activated(){
      // console.log("父组件activited");
      let id = this.$route.params.singerId;
      if(id){
        this.getData(id);
      }
    }
  }
</script>

<style scoped>
  .singerDetail{
    width: 100%;
  }
</style>